<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button"); // 得到了所有的button
            var inputs = document.getElementById("bottom").getElementsByTagName("input");
            // bottom 里面的input
       /*     btns[0].onclick = function(){

                for(var i=0; i<inputs.length;i++)
                {
                    inputs[i].checked = true;  // 选中表单
                }
            }

            btns[1].onclick = function(){

                for(var i=0;i<inputs.length;i++)
                {
                    inputs[i].checked = false;
                }
            }

            btns[2].onclick = function(){

                for(var i=0;i<inputs.length;i++)
                {
                    if(inputs[i].checked == true)
                    {
                        inputs[i].checked = false;
                    }
                    else
                    {
                        inputs[i].checked = true;
                    }
                }
            }*/

            /*全选和取消 函数*/
             function all(flag){
                 for(var i=0;i<inputs.length;i++)
                 {
                     inputs[i].checked = flag;
                 }
             }
             btns[0].onclick = function(){
                  all(true);
             };
             btns[1].onclick = function(){
                  all(false);
             };
             btns[2].onclick = function(){

                 for(var i=0;i<inputs.length;i++)
                 {
                     inputs[i].checked == true ?  inputs[i].checked = false : inputs[i].checked = true;
                 }
             }
        }
    </script>
</head>
<body>
<div id="top">
    <button>全选</button>
    <button>取消</button>
    <button>反选</button>
</div>
<div id="bottom">
    <ul>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
    </ul>
</div>
</body>
</html>